<template>
    <div v-loading="loading">
            <el-button @click="page=1;init()" icon="el-icon-refresh-right" size="small" type="primary" style="margin-left: 2px;">刷新</el-button>
        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-table :data="data" max-height="550px" size="small" style="width: 100%">
                <el-table-column label="ID" prop="collection_id"></el-table-column>
                <el-table-column label="用户ID" prop="user_id">
                    <template slot-scope="scope">
                        <UserInfo :user_id="scope.row.user_id" :userInfos="scope.row.author" v-if="scope.row.user_id">
                        </UserInfo>
                    </template>
                </el-table-column>
                <el-table-column label="名称" prop="creation_name"></el-table-column>
                <el-table-column label="图片" prop="first_frame">
                    <template slot-scope="scope">
                        <el-image class="border" style="width: 50px; height: 50px" fit="cover" :src="scope.row.first_frame"
                            :preview-src-list="toArray(scope.row.first_frame)">
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column label="观看数" prop="viewed"></el-table-column>
                <el-table-column label="审核时间" prop="verify_at" sortable></el-table-column>
                <el-table-column label="状态" prop="status" width="100px">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status == 0" type="warning">待审核</el-tag>
                        <el-tag v-else-if="scope.row.status == 1" type="success">已通过</el-tag>
                        <el-tag v-else-if="scope.row.status == 2" type="danger">已拒绝</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="添加时间" prop="created_at" sortable></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <div v-show="scope.row.status == 0">
                            <el-popconfirm @confirm="passFun(scope.row.creation_id, 1)" title="确定要通过吗？">
                                <el-button size="mini" slot="reference" type="primary" style="padding: 10px" v-permission="['ADMIN', 'LONG_VIDEOS_PASS']">通过</el-button>
                            </el-popconfirm>

                            <el-popconfirm @confirm="reasonShowFun(scope.row.creation_id)" title="确定要拒绝吗？">
                                <el-button size="mini" slot="reference" type="danger" style="padding: 10px" v-permission="['ADMIN', 'LONG_VIDEOS_REFUSE']">拒绝</el-button>
                            </el-popconfirm>
                            <el-button size="mini" slot="reference" type="success" style="padding: 10px"
                                @click="toDetails(scope.row.collection_id)" v-permission="['ADMIN', 'LONG_VIDEO_DETAILS']">详情</el-button>
                        </div>
                        <div v-show="scope.row.status != 0">
                            <el-button size="mini" slot="reference" type="success" style="padding: 10px"
                                @click="toDetails(scope.row.collection_id)" v-permission="['ADMIN', 'LONG_VIDEO_DETAILS']">详情</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 分页组件 -->
        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-pagination :current-page="page" :total="total" @current-change="pageChange" @size-change="sizeChange"
                layout="total, prev, pager, next, sizes" style="margin-top: 8px;" />
        </el-card>

        <!-- 拒绝审核 -->
        <el-dialog :visible.sync="reasonShow" title="拒绝原因" width="800px">
            <el-form :model="reasonForm">
                <el-form-item label="拒绝原因">
                    <el-input placeholder="请输入拒绝原因" style="width: 500px" v-model="reasonForm.refuse_disable"
                        type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="closeBox">取 消</el-button>
                <el-button @click="disableFun" :loading="submitComplete" type="primary">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>
      
<script>
import treeSelect from '@/components/SelectTree/index'
import list from "@/api/bank.json"
import medium from '@/components/medium/index'
import initData from '@/mixins/index'
export default {
    name:"long-video-process",
    mixins: [initData],
    components: {
        treeSelect,
        medium
    },
    data() {
        return {
            query: {
                status: null,
                real_name: '',
                bank_name: '',
                bank_card: '',
                bank_address: ''
            },
            value: '',
            typeList: list,
            visible: false,
            loading: false,
            images: [],

            reasonShow: false,
            reasonForm: {
                refuse_disable: "", //理由
                status: null, // 状态 {0待审核1审核通过2审核拒绝}
                creation_id:""
            },
            disableID: '',
            submitComplete: false
        }
    },
    mounted() {
        //this.getworksList()
        this.beforeInit()


    },
    methods: {
        toArray(str) {
            const arr = []
            arr.push(str)
            return arr
        },
        beforeInit() {
            this.url = "/creation/long_video"
            this.init() //重新请求数据
        },
        selectFun(val) {
            this.query.bank_name = val
        },

        toDetails(id) {
            this.$router.push({ path: "/long-video-details?id=" + id });
        },


        reasonShowFun(id) {
            this.reasonForm.creation_id = id
            this.reasonShow = true
        },

        initReasonForm() {
            this.reasonForm = {
                refuse_disable: "", //理由
                status: null, // 状态 {0待审核1审核通过2审核拒绝}
            }
        },


        //禁用
        disableFun(id) {
            if (this.submitComplete) return
            this.submitComplete = true
            let that = this
            that.reasonForm.status = 2
            this.$request.put('/creation/long_video_update', that.reasonForm).then((res) => {
                this.$message.success('操作成功')
                this.submitComplete = false
                that.reasonShow = false
                that.initReasonForm()
                this.init() //重新请求数据
            }).catch((error) => {
                this.submitComplete = false
            });
        },
        
        closeBox() {
            this.reasonShow = false
            that.initReasonForm()
        },



        passFun(id, status) {
            let that = this
            this.$request.put('/creation/long_video_update', { creation_id: id, status: status }).then((res) => {
                this.$message.success('操作成功')
                this.init() //重新请求数据
            })
        },









    },
}
</script>
      
<style lang="scss" scoped>
.butBox {
    background-color: rgb(219, 219, 219);
    border: none;
    color: #555;
}

.flex {
    display: flex;
}
</style>